<template>
  <div class="box-boss">
    <div class="top">
      <div>
        <el-button @click="$router.back()">返回店铺列表</el-button>
      </div>
      <div style="margin:30px 0">
        <el-row>
          <el-col :span="6">
            <span>店铺编号:{{shopInfo.shop_id}}</span>
          </el-col>
          <el-col :span="8">
            <span>店铺名称：{{shopInfo.shop_name}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>行业：{{shopInfo.industry}}</span>
          </el-col>
          <el-col :span="8">
            <span>联系电话：{{shopInfo.tel_phone}}</span>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="center">
      <div class="center-title">店铺销售分析</div>
      日期:
      <el-date-picker v-model="value1"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
      </el-date-picker>
      <div id="shopSaleAnalyze"
           style="width: 100%;height:400px;"></div>
      <div class="box-ss">
        <p>订单总量:{{shopInfo.totalSaleNum}}</p>
        <p>订单总额:{{shopInfo.saleMoney}}元</p>
      </div>
    </div>
    <div class="bottom">
      <div class="center-title">店铺消费情况</div>
      <div id="shopConsume"
           style="width: 100%;height:400px;"></div>
    </div>
  </div>
</template>

<script>
// import { getItem } from '@/utils/storage'
import echarts from 'echarts'
export default {
  data () {
    return {
      shopInfo: {},
      value1: [new Date(), new Date()],
      drawChart () {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('shopSaleAnalyze'))
        // 指定图表的配置项和数据
        const option = {
          color: ['#006cff', '#60cda0', '#ed8884'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} 元 ({d}%)'
          },
          series: [
            {
              name: '销售类别',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 400, name: '类别一' },
                { value: 500, name: '类别二' },
                { value: 1548, name: '类别三' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
      drawChartConsume () {
        const myChart1 = echarts.init(document.getElementById('shopConsume'))
        // 指定图表的配置项和数据
        const option1 = {
          color: ['#006cff', '#60cda0', '#ed8884'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} 元 ({d}%)'
          },
          series: [
            {
              name: '销售类别',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 400, name: '类别一' },
                { value: 500, name: '类别二' },
                { value: 1548, name: '类别三' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1)
      }
    }
  },
  created () {
    this.loadShopInfo()
  },
  mounted () {
    this.drawChart()
    this.drawChartConsume()
  },
  methods: {
    loadShopInfo () {
      this.shopInfo = this.$route.params
      console.log(this.shopInfo);
      // const arr = getItem('OPERETA')
      // arr.forEach(item => {
      //   this.$store.commit('salemoneyCount', item.totalSaleMoney, item.totalSaleNum)
      // })
    }
  }
}
</script>

<style scoped lang="less">
.box-boss {
  padding: 20px;
  .el-row {
    margin-bottom: 15px;
  }
  .center-title {
    margin: 15px 0;
  }
}
.center {
  position: relative;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  .box-ss {
    position: absolute;
    top: 60%;
    right: 25%;
  }
}

.bottom {
  position: relative;
}
.formTop {
  z-index: 9999;
  position: absolute;
  height: 40px;
  top: 5px;

  width: 98%;
  border: solid 1px #000;
  border-radius: 5px;
  background-color: rgba(red, green, blue);
}
</style>